<template>
  <view class="p-32">
    <view class="u-m-b-15">
      <u-input
        v-model="formData.name"
        border="surround"
        placeholder="请输入姓名"></u-input>
    </view>
    <view class="u-m-b-15">
      <u-input
        v-model="formData.phone"
        border="surround"
        placeholder="请输入手机号"></u-input>
    </view>
    <view class="u-m-b-15">
      <u-input
        v-model="formData.idcard"
        border="surround"
        placeholder="请输入身份证号"></u-input>
    </view>
    <view class="u-m-b-15">
      <u-input
        v-model="formData.age"
        border="surround"
        placeholder="请输入年龄"></u-input>
    </view>
    <view class="u-m-b-15">
      <u-input
        v-model="formData.password"
        border="surround"
        type="password"
        placeholder="请输入密码"></u-input>
    </view>
    <view class="u-m-b-15">
      <u-input
        v-model="formData.password2"
        border="surround"
        type="password"
        placeholder="请确认密码"></u-input>
    </view>
    <view class="u-m-t-60">
      <u-button
        type="primary"
        @click="submit"
        :custom-style="{ height: '96rpx' }"
        >提交</u-button
      >
    </view>
    <u-upload
      :fileList="fileList"
      @afterRead="afterRead"
      name="otherProfileImages"
      multiple
      :maxCount="3"></u-upload>
    <view class="namebox">
      <view>姓名</view>
      <view class="link">张有志</view>
    </view>

    <view class="editor-box">
      <sp-editor
        :toolbar-config="{
          excludeKeys: [
            'direction',
            'date',
            'lineHeight',
            'letterSpacing',
            'listCheck',
            'video',
            'image',
            'export',
            'link',
          ],
          iconSize: '18px',
        }"
        @init="initEditor"
        @input="inputOver"
        @upinImage="upinImage"
        @overMax="overMax"
        @addLink="addLink"
        @exportHtml="exportHtml"></sp-editor>
    </view>
    <view>
      <zxz-uni-data-select v-model="value" filterable :localdata="range" />
    </view>
    <view class="u-m-t-60">
      <u-button
        type="primary"
        @click="openModel"
        :custom-style="{ height: '96rpx' }"
        >打开</u-button
      >
    </view>
  </view>
</template>

<script setup>
import spEditor from "@/libs/sp-editor/components/sp-editor/sp-editor.vue";
const value = ref("");
const range = ref([
  {
    "value": 0,
    "text": "篮球",
    "disable": true,
  },
  {
    "value": 1,
    "text": "足球",
  },
  {
    "value": 2,
    "text": "游泳",
  },
]);
// import { useValidate } from "@/hooks/useValidate";
const { check } = useValidate();
const { fileList, resultFile, upFile } = useUpload();
const formData = reactive({
  name: "",
  phone: "",
  idcard: "",
  age: "",
  password: "",
  password2: "",
});
const rule = {
  password: "@密码|require",
  password2: "@确认密码|confirm:password",
};
const submit = async () => {
  const vaildate = await check(rule, formData, true);
  console.log("vaildate: ", vaildate);
  // if (vaildate !== true) {
  //   let msg = Object.values(vaildate);
  //   console.log("msg: ", msg);
  //   uni.$u.toast(msg[0]);
  // }
};
const afterRead = (file) => {
  upFile(file.file);
};
// 富文本编辑器
const editorIns = ref(null);
/**
 * 获取输入内容
 * @param {Object} e {html,text} 内容的html文本，和text文本
 */
function inputOver(e) {
  // 可以在此处获取到编辑器已编辑的内容
  console.log("==== inputOver :", e);
}

/**
 * 超出最大内容限制
 * @param {Object} e {html,text} 内容的html文本，和text文本
 */
function overMax(e) {
  // 若设置了最大字数限制，可在此处触发超出限制的回调
  console.log("==== overMax :", e);
}

/**
 * 编辑器就绪
 * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
 * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
 * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
 */
function initEditor(editor) {
  editorIns.value = editor; // 保存编辑器实例
  // 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
  preRender();
}

function preRender() {
  setTimeout(() => {
    // 异步获取后端数据后，初始化编辑器内容
    editorIns.value.setContents({
      html: `<div>&nbsp;&nbsp;猫猫<img src="https://img.yzcdn.cn/vant/cat.jpeg"/></div>`,
    });
  }, 1000);
}

/**
 * 直接运行示例工程插入图片无法正常显示的看这里
 * 因为插件默认采用云端存储图片的方式
 * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
 * @param {Object} tempFiles
 * @param {Object} editorCtx
 */
function upinImage(tempFiles, editorCtx) {
  /**
   * 本地临时插入图片预览
   * 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
   * 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
   * @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
   */
  // #ifdef MP-WEIXIN
  // 注意微信小程序的图片路径是在tempFilePath字段中
  editorCtx.insertImage({
    src: tempFiles[0].tempFilePath,
    width: "80%", // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
    success: function () {},
  });
  // #endif

  // #ifndef MP-WEIXIN
  editorCtx.insertImage({
    src: tempFiles[0].path,
    width: "80%", // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
    success: function () {},
  });
  // #endif

  /**
   * 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
   * 正式开发环境中，请将上面 本地临时插入图片预览 注释后，模仿以下写法
   */
  // tempFiles.forEach(async (item) => {
  //   uni.showLoading({
  //     title: '上传中请稍后',
  //     mask: true
  //   })
  //   let upfile = await uniCloud.uploadFile({
  //     filePath: item.path,
  //     // 同名会导致报错 policy_does_not_allow_file_overwrite
  //     // cloudPath可由 想要存储的文件夹/文件名 拼接，若不拼文件夹名则默认存储在cloudstorage文件夹中
  //     cloudPath: `cloudstorage/${item.name}`,
  //     cloudPathAsRealPath: true
  //   })
  //   editorCtx.insertImage({
  //     src: upfile.fileID,
  //     width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
  //     success: function () {
  //       uni.hideLoading()
  //     }
  //   })
  // })
}

/**
 * 导出 - toolbar需要开启export工具
 * @param {string} e 导出的html内容
 */
function exportHtml(e) {
  uni.navigateTo({
    url: "/pages/out/out",
    success(res) {
      // 传至导出页面解析即可
      res.eventChannel.emit("e-transmit-html", {
        data: e,
      });
    },
  });
}

/**
 * 添加超链接
 * @param {Object} e { text: '链接描述', href: '链接地址' }
 */
function addLink(e) {
  console.log("==== addLink :", e);
}

const openModel = () => {
  getApp().globalData.popShow({
    type: "loadingAndToast",
    title: "toast",
    isLoading: false,
    maskShow: false,
  });
};
</script>

<style lang="scss" scoped>
.namebox {
  // @include whiteBox(16rpx, 32rpx 20rpx);
  @include cellItem;
  // color: $uni-color-primary;
}
</style>
